<!-- 钻探工程表 -->
<template>
  <el-drawer v-model="addDrawer" size="50%" :show-close="false" @opened="openDrawer" @close="closeDrawer">
    <template #title>
      <el-space direction="vertical" class="space-width100">
        <div v-if="route.path.includes('dataIntegrate') && form.qcOpinion">
          <el-form :model="form" :inline="true" label-width="140px">
            <el-form-item label="质检不通过原因" style="width: 100%">
              <el-input v-model="form.qcOpinion" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" resize="none"
                clearable></el-input>
            </el-form-item>
          </el-form>
        </div>
        <h2>
          <el-row justify="space-between">
            <span><svg-icon icon-class="list"></svg-icon><span style="padding-left: 15px">{{ formName }}</span></span>
            <div>
              <el-button type="primary" @click="confirmAndSave" :disabled="drawerLoading"
                v-if="!form[idName]">保存&继续填写</el-button>
              <el-button type="primary" @click="confirmClick" :disabled="drawerLoading"
                v-if="!(route.path.includes('dataIntegrate') || route.path.includes('achievementSearch'))">保存</el-button>
            </div>
          </el-row>
        </h2>
      </el-space>
    </template>
    <template #default>
      <el-form :model="form" ref="addRef" :inline="true" :rules="formRules" label-width="160px" v-loading="drawerLoading">
        <el-row justify="space-between">
          <el-form-item label="省" prop="provinceId" v-if="provinceData.length > 0 || form.provinceId">
            <el-select v-model="form.provinceId" placeholder="请选择省" @change="chooseFormProvince" clearable>
              <el-option v-for="item in provinceData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="省" v-else>
            <el-input v-model="form.province" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="市" prop="cityId" v-if="provinceData.length > 0 || form.cityId">
            <el-select v-model="form.cityId" placeholder="请选择市" @change="chooseFormCity" clearable>
              <el-option v-for="item in cityData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="市" v-else>
            <el-input v-model="form.city" clearable disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="区/县" prop="countyId" v-if="provinceData.length > 0 || form.countyId">
            <el-select v-model="form.countyId" placeholder="请选择区/县" @change="chooseFormCounty" clearable>
              <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="区/县" v-else>
            <el-input v-model="form.county" clearable disabled></el-input>
          </el-form-item>
          <el-form-item label="工程编号" prop="id">
            <el-input v-model="form.id" placeholder="请输入工程编号" clearable maxlength="17"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="地质填图区编号" prop="mainAfsRegionId">
            <el-input v-model="form.mainAfsRegionId" placeholder="请输入地质填图区编号" clearable maxlength="17"></el-input>
          </el-form-item>
          <el-form-item label="目标区编号" prop="targetRegionId">
            <el-input v-model="form.targetRegionId" placeholder="请输入目标区编号" clearable maxlength="17"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="工作区编号" prop="workRegionId">
            <el-input v-model="form.workRegionId" placeholder="请输入工作区编号" clearable maxlength="17"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="工程名称" prop="name" style="width: 100%">
            <el-input v-model="form.name" placeholder="请输入工程名称" clearable :autosize="{ minRows: 4, maxRows: 8 }"
              type="textarea" show-word-limit maxlength="255" resize="none"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="钻孔数" prop="drillCount">
            <el-input v-model="form.drillCount" placeholder="请输入钻孔数" clearable maxlength="4"></el-input>
          </el-form-item>
          <el-form-item label="钻孔总进尺 [米]" prop="drillLength">
            <el-input v-model="form.drillLength" placeholder="请输入钻孔总进尺 [米]" clearable maxlength="8"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="采集样品总数" prop="collectedSampleCount">
            <el-input v-model="form.collectedSampleCount" placeholder="请输入采集样品总数" clearable maxlength="4"></el-input>
          </el-form-item>
          <el-form-item label="钻探工程测年送样总数" prop="sampleCount">
            <el-input v-model="form.sampleCount" placeholder="请输入钻探工程测年送样总数" clearable maxlength="4"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="钻探工程获得测试结果样品总数" prop="datingSampleCount">
            <el-input v-model="form.datingSampleCount" placeholder="请输入钻探工程获得测试结果样品总数" clearable maxlength="4"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="钻探单位" prop="drillInstitute" style="width: 100%">
            <el-input v-model="form.drillInstitute" placeholder="请输入钻探单位" clearable :autosize="{ minRows: 3, maxRows: 6 }"
              type="textarea" show-word-limit maxlength="80" resize="none"></el-input>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="工程设计报告编号" prop="dbArid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.dbArid" placeholder="请输入工程设计报告编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.dbArFileid" @uploadFile="uploadSuccess('dbArFileid', $event)"
                @delFile="deleteFile('dbArFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="设计书原始文件编号" prop="dbArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.dbArwid" placeholder="请输入设计书原始文件编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.dbArwFileid" @uploadFile="uploadSuccess('dbArwFileid', $event)"
                @delFile="deleteFile('dbArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="变更情况" prop="csArid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.csArid" placeholder="请输入变更情况号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.csArFileid" @uploadFile="uploadSuccess('csArFileid', $event)"
                @delFile="deleteFile('csArFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="变更情况原始" prop="csArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.csArwid" placeholder="请输入变更情况原始" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.csArwFileid" @uploadFile="uploadSuccess('csArwFileid', $event)"
                @delFile="deleteFile('csArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="成果报告文件报告编号" prop="reportArid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.reportArid" placeholder="请输入成果报告文件报告编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.reportArFileid" @uploadFile="uploadSuccess('reportArFileid', $event)"
                @delFile="deleteFile('reportArFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="成果报告原始文件编号" prop="reportArwid" style="width:100%">
            <el-space direction="vertical" alignment="flex-start" :size="15" class="upload-space">
              <el-input v-model="form.reportArwid" placeholder="请输入成果报告原始文件编号" clearable maxlength="20"></el-input>
              <FileUpload v-model="form.reportArwFileid" @uploadFile="uploadSuccess('reportArwFileid', $event)"
                @delFile="deleteFile('reportArwFileid', $event)" />
            </el-space>
          </el-form-item>
        </el-row>
        <el-row justify="space-between">
          <el-form-item label="备注" prop="commentInfo" style="width:100%">
            <el-input v-model="form.commentInfo" placeholder="请输入备注" :autosize="{ minRows: 5, maxRows: 10 }"
              type="textarea" show-word-limit maxlength="2147483647" clearable></el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </template>
  </el-drawer>
</template>
<script setup>
import { eightDouble, fourInt } from '@/utils/validate'
import useOtherData from '@/hooks/useOtherData'
const { route, form, queryData, formName, idName,
  uploadSuccess, deleteFile,
  chooseFormProvince, chooseFormCity, chooseFormCounty,
  addRef, confirmAndSave, addDrawer, confirmClick, checkIdValid, openDrawer, closeDrawer, drawerLoading } = useOtherData()

const { provinceData, cityData, areaData } = toRefs(queryData)

const formRules = reactive({
  provinceId: [{ required: true, message: '请选择省！', trigger: 'change' }],
  cityId: [{ required: true, message: '请选择市！', trigger: 'change' }],
  countyId: [{ required: true, message: '请选择区/县！', trigger: 'change' }],
  id: [
    { required: true, message: '请输入工程编号!', trigger: 'blur' },
    { min: 17, max: 17, message: '长度必须为17位', trigger: 'blur' },
    { validator: checkIdValid, trigger: 'blur' },
  ],
  name: [{ required: true, message: '请输入工程名称!', trigger: 'blur' }],
  drillCount: [{ required: true, message: '请输入钻孔数!', trigger: 'blur' }, fourInt],
  drillLength: [{ required: true, message: '请输入钻孔总进尺 [米]!', trigger: 'blur' }, eightDouble],
  collectedSampleCount: [eightDouble],
  sampleCount: [fourInt],
  datingSampleCount: [fourInt]
})
</script>
